Page({
  data: {
    h:'',
    shareImgSrc:'',
    imgurl:'',
    nowrmb:'',
    prermb:'',
    title:'',
    xj:'',
    maskHidden:true,
    src:'',
    tupurl:'',
    screenWidth:'',
    bili:''
  },
  onLoad:function(options){
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        var bl =(res.windowWidth / 375).toFixed(2);
        that.setData({
          screenWidth: res.windowWidth,
          bili: bl
        })
        console.log(res.windowWidth)
        console.log(that.data.bili)
      },
      fail:function(){
        that.setData({
          screenWidth:320,
          bili: 0.85
        })
      }
    })
    var imgurl = options.imgurl;
    var nowrmb = options.nowrmb;
    var prermb = options.prermb;
    var title = options.title;
    var xj = options.xj;
    this.setData({
      imgurl: imgurl,
      nowrmb: nowrmb,
      prermb: prermb,
      title: title,
      xj: xj,
    })
    this.downLoadFile()
  },
  zhuanhua:function(){
    var that=this;
    console.warn(that.data.src)
    console.warn(that.data.tupurl)
    if (that.data.src != '' && that.data.tupurl != '') {
      that.drawCanvas();
    } else {
      that.downLoadFile()
    }
  },
  // 下载图片
  downLoadFile:function(){

    wx.showToast({
      title: '分享图片生成中...',
      icon: 'loading',
      duration: 1000
    });

    var that = this;
    var erweima = wx.getStorageSync('shareImgSrc');
    console.log(erweima)
    var tupian = this.data.imgurl;
    console.log(tupian)
    console.warn(erweima)
    console.warn(tupian)

    wx.downloadFile({
      url: tupian,
      success: function (sres) {
        console.log(sres);
        that.data.tupurl = sres.tempFilePath;
        // that.drawCanvas();
      },
      fail: function (fres) {
        wx.showToast({
          title: '图片加载失败，请重新加载',
          icon: 'none',
          duration: 1000,
          success: function () {
            setTimeout(function(){
                wx.navigateBack()
            }, 1000)
          }
        })
      }
    })

      wx.downloadFile({
        url: erweima,
        success: function (sres) {
          console.log(sres);
          that.data.src = sres.tempFilePath;
              setTimeout(function () {
                   that.zhuanhua();
                  //  that.drawCanvas();
              }, 500)
        },
        fail: function (fres) {
          wx.showToast({
            title: '图片加载失败，请重新加载',
            icon: 'none',
            duration: 1000,
            success:function(){
              setTimeout(function () {
                wx.navigateBack()
              }, 1000)

            }
          })

        }
      })


  },

  drawCanvas:function(){
    var that=this;
    // console.log('画画图')
    var ctx = wx.createCanvasContext('firstCanvas');
    var txt = this.data.title;
    var url = this.data.imgurl;
    var pictureSrc = this.data.src; //图片能获取

    if (txt.length >=10) {
      txt = txt.substr(0, 10) + "...";
    }
    var num=this.data.xj;
    var jlj="奖励："+num+"小金";
    var num1 = this.data.nowrmb;
    var nowj = "￥" + num1;
    var num2 = this.data.prermb;
    var prej = "￥" + num2;

    ctx.clearRect(0, 0, 375 * that.data.bili, 375 * that.data.bili);
    //2 获取画布画指定内容
    ctx.setFillStyle('#FFFFFF');
    ctx.fillRect(0, 0, 375 * that.data.bili, 375 * that.data.bili);
    // 画上面的矩形
    ctx.beginPath();
    ctx.setFillStyle('#FFFFFF');
    ctx.setShadow(0, 0, 6 * that.data.bili, '#DBDDE1');
    ctx.fillRect(15 * that.data.bili, 15 * that.data.bili, 345 * that.data.bili, 207 * that.data.bili);
    ctx.closePath();

    // 画二维码
    console.log(pictureSrc)
    ctx.setShadow(0, 0, 0, '#FFFFFF');
    ctx.drawImage(pictureSrc, 15 * that.data.bili, 242 * that.data.bili, 120 * that.data.bili, 118 * that.data.bili);

    // 画任意图
    var url = this.data.tupurl;
    ctx.drawImage(url, 30 * that.data.bili, 43.5 * that.data.bili, 145 * that.data.bili, 145 * that.data.bili);

    // 写图片右侧文字(大字)
    ctx.setFontSize(15 * that.data.bili);
    ctx.setFillStyle('#353535');
    ctx.fillText(txt, 185 * that.data.bili, 57 * that.data.bili, 160 * that.data.bili);
    //  小金
    ctx.setFontSize(13 * that.data.bili);
    ctx.setFillStyle('#999999');
    ctx.fillText(jlj, 185 * that.data.bili, 154 * that.data.bili);
    // 现价
    ctx.setFontSize(20 * that.data.bili);
    ctx.setFillStyle('#FE003B');
    ctx.fillText(nowj, 185 * that.data.bili, 189 * that.data.bili);
    // 原价
    ctx.setFontSize(13 * that.data.bili);
    ctx.setFillStyle('#999999');
    ctx.fillText(prej, 280 * that.data.bili, 189 * that.data.bili);
    //  小确幸活动
    ctx.setFontSize(15 * that.data.bili);
    ctx.setFillStyle('#353535');
    ctx.fillText('小确幸活动', 218 * that.data.bili, 277 * that.data.bili);

    // 矩形
    ctx.setFillStyle('#FFC900');
    ctx.fillRect(190 * that.data.bili, 306 * that.data.bili, 130 * that.data.bili, 33 * that.data.bili);
  // 按钮加文字
    ctx.setShadow(0, 0, 0, '#FFFFFF');
    ctx.setFontSize(15 * that.data.bili);
    ctx.setFillStyle('#FFFFFF');
    ctx.fillText('长按扫码参加', 210 * that.data.bili, 330 * that.data.bili);


    //最后画所有内容
    var that = this;
    ctx.draw(true, setTimeout(function () {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 375 * that.data.bili,
        height: 375 * that.data.bili,
        destWidth: 375 * that.data.bili,
        destHeight: 375 * that.data.bili,
        canvasId: 'firstCanvas',
        success: function (res) {
          var tempFilePath = res.tempFilePath;
          console.log(tempFilePath)
          wx.setStorageSync('tempFilePath', tempFilePath)
          wx.hideToast()
          wx.previewImage({
            current: tempFilePath, // 当前显示图片的http链接
            urls: [tempFilePath], // 需要预览的图片http链接列表
            success: function (res) {
              setTimeout(function () {
                wx.navigateBack()
              }, 500)

            }
          })
        },
        fail: function (res) {
          console.log(res);
        }
      })

    }, 500))
  },
  baocun:function(){
    var tempFilePath=wx.getStorageSync('tempFilePath');

    wx.saveImageToPhotosAlbum({
      filePath: tempFilePath,
      success(res) {
        wx.showModal({
          title: '图片成功保存到相册了，去发圈噻~',
          success: function (res) {
            wx.navigateBack()
          }
        })
      }
    })

  }


})
